<template>
    <div class="LoginPage">
        <div class="login-container">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                <h3 class="title">智慧园区管理系统</h3>
                <el-form-item prop="username">
                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="input username">
                    <svg-icon :class="className"/>
                </el-input>
                </el-form-item>
                <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin" class="input password">
                    <svg-icon :class="className"/>
                </el-input>
                </el-form-item>
                <el-form-item prop="code">
                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 50%" @keyup.enter="handleLogin" class="input code">
                    <svg-icon :class="className"/>
                </el-input>
                <div class="login-code">
                    <img :src="captchaUrl" class="user-yzm">
                    <a href="#" class="yzm-btn" @click.prevent="getCode">看不清换一张</a>
                </div>
                </el-form-item>
                <el-form-item style="width:103%;margin-left: 20px;">
                <el-button size="medium" type="primary" style="width:80%;" @click.prevent="handleLogin" class="login-btn">
                    <span>登 录</span>
                </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        name: 'LoginPage',
        data() {
            return {
                captchaUrl: "",
                cookiePassword: "",
                loginForm: {
                    username: "",
                    password: "",
                    rememberMe: false,
                    code: "",
                    uuid: ""
                },
                imgData:'',
                tokenHead :'',
                token:'',
                Authorization:'',
                localStorage:{}
            }
        },
        created () {
            this.getCode();
        },
        methods: {
            getCode(){
                axios.get('http://localhost:9002/captchaImage').then(response => {
                const imgData = response.data.data.img
                this.captchaUrl = 'data:image/jpeg;base64,' + imgData
                this.loginForm.uuid = response.data.data.uuid
                console.log(this.loginForm.uuid);
            })
            },
            handleLogin(){
                console.log(this.loginForm.username);
                if(this.loginForm.username == ""){
                    alert("请输入用户名");
                    return;
                }
                if(this.loginForm.password == ""){
                    alert("请输入密码");
                    return;
                }
                if(this.loginForm.code == ""){
                    alert("请输入验证码");
                    return;
                }
                axios({
                    url: 'http://localhost:9002/admin/login',
                    method: 'post',
                    data: {
                        username: this.loginForm.username,
                        password: this.loginForm.password,
                        code: this.loginForm.code,
                        uuid: this.loginForm.uuid
                    }
                })
                .then(response => {
                    console.log(response);
                    if(response.data.code == 200){
                        let tokenHead = response.data.data.tokenHead;
                        let token = response.data.data.token;
                        let Authorization = tokenHead +" " + token;
                        localStorage.setItem("Authorization",Authorization);
                        this.$router.push('/index');
                    }else{
                        alert(response.data.message);
                        axios.get('http://localhost:9002/captchaImage').then(response => {
                            const imgData = response.data.data.img;
                            this.captchaUrl = 'data:image/jpeg;base64,' + imgData
                            this.uuid = response.data.data.uuid
                        })
                    }
                })
            }
        }
    }
</script>
<style>
.LoginPage{
    border: 1px solid #ccc;
    width: 420px;
    height: 370px;
    position: relative;
    left: 560px;
    top: 30px;
    border-radius: 8px 8px 8px 8px;
    background-color: #e6ecfa;
}
h3{
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}
.input{
    width: 350px;
    height: 30px;
    
}
.username{
    margin-left: 30px;
    margin-top: 15px;
}
.password{
    margin-left: 30px;
    margin-top: 15px;
}
.yzm{
    margin-left: 30px;
    margin-top: 15px;
    
}
.code{
    width: 100px;
    height: 30px;
    margin-left: 30px;
    margin-top: 15px;
}
.className{
    width: 30px;
}
.login-btn{
    width: 350px;
    height: 35px;
    margin-left:10px;
    background-color: #1890ff;
    border: none;
    border-radius: 4px;
    color: white;
    position: absolute;
    top: -35px;
}
.user-yzm{
    position: relative;
    width: 110px;
    height: 40px;
    left: 265px;
    top: -39px;
}
.yzm-btn{
    position: absolute;
    left: 290px;
    top: 60px;
}
</style>